<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>燃情世界杯</title>
    <link rel="stylesheet" href="css/aos.css"/>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/zepto.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/iscroll-zoom.js"></script>
    <script src="js/aos.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="bg" style="background-image: url('images/index/ppbg.jpg')">
    <div class="picture">
        <div class="picture_text">
            <p>挑选一张你最满意的姿态吧</p>
        </div>
        <ul>
            <li aos="fade-down" aos-delay="100">
                <img src="images/index/picc.jpg" alt=""/>
            </li>
            <li aos="fade-down" aos-delay="200">
                <img src="images/index/picc.jpg" alt=""/>
            </li>
            <li aos="fade-down" aos-delay="300">
                <img src="images/index/picc.jpg" alt=""/>
            </li>
            <li class="active" aos="fade-down" aos-delay="400">
                <img src="images/index/picc.jpg" alt=""/>
            </li>
        </ul>
        <div class="dian">
            <a href="photograph.html" > 返回 </a>
            <a href="slogan.html" > 确认 </a>
        </div>
    </div>
</div>
</body>
<script src="js/index.js"></script>
<script language="JavaScript">
    $(".picture li").click(function(){
        $(this).addClass('active').siblings().removeClass('active');
    })
    AOS.init({
    easing: 'ease-out-back',
    duration: 1000,
//        disable: 'mobile'
  });
</script>

</html>
